<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head>
    <title>学业信息</title>
    <div data-th-replace="layout/head"></div>
</head>
<body>
    <!-- top bar -->
    <header class="bar bar-nav">
        <a class="button button-link button-nav pull-left goBack" href="javascript:window.history.go(-1);">
            <span class="iconfont icon-fanhui"></span>
        </a>
        <h1 class='title title-white'>学业信息</h1>
    </header>
    <!-- top bar end-->

    <div class="content order-content">
        <div class="academic-btn pl75 pr75 pt5 pb5 pr" id="hintLanguage" style="line-height: 120%;">
            <section><b class="fs6 c-red">学业信息说明：</b></section>
            <span class="c-red fs4">
            1、初次注册成功后可进行选择，基础专业最多可选3个
            </span>
            <br>
            <span class="c-red fs4">
             2、当购买了课程、试卷后。它们所属的专业，会解锁成功自动添加为你的附加专业
            </span>
            <br>
            <span class="c-red fs4">
             3、当拥有了某专业，即可不受限的添加此专业下的所有科目
            </span>
            <br>
            <span class="c-red fs4">
             4、拥有专业越多，即可体验更多功能和学习资源
            </span>
        </div>

        <div>
            <section>
                <section class="content-block-title">
                    <aside class="pull-right" th:if="${#lists.isEmpty(userAcademicMap['subjectList'])} or ${#lists.size(userAcademicMap['subjectList'])} < 3">
                        <button class="button button-round addBigSubject">新增专业</button>
                    </aside>
                    <i class="icon iconfont icon-erji vam c-blue"></i>
                    <b class="c-333 vam">基础专业</b>
                </section>
                <div class="list-block">
                    <ul style="margin-top: .5rem;" th:if="!${#lists.isEmpty(userAcademicMap['subjectList'])}" th:each="subject : ${userAcademicMap['subjectList']}">
                        <li class="item-content">
                            <div class="item-inner">
                                <div class="item-title fs7 parent-subject" th:attrappend="data-id=${subject['id']}" th:text="${subject['subjectName']}"></div>
                                <div class="item-after"><a href="javascript:void(0);" class="c-bule fs6 addSmallSubject" th:attrappend="data-parent=${subject['id']}">新增科目</a></div>
                            </div>
                        </li>
                        <li th:if="!${#lists.isEmpty(subject['childSubjectList'])}" class="item-content">
                           <div class="item-inner">
                               <div class="academicCon">
                                   <ul style="padding-left: 0;">
                                       <li th:each="child : ${subject['childSubjectList']}" th:attrappend="data-id=${child['id']}" th:classappend="'parent-box-'+${subject['id']}">
                                           <span class="vam fs6" th:text="${child['subjectName']}"></span>
                                       </li>
                                   </ul>
                               </div>
                           </div>
                        </li>
                    </ul>
                </div>
            </section>
            <!-- 附加专业 -->
            <section>
                <section class="content-block-title">
                    <i class="icon iconfont icon-erji vam c-blue"></i>
                    <b class="c-333 vam">附加专业</b>
                </section>
                <div class="list-block">
                    <ul style="margin-top: .5rem;" th:if="!${#lists.isEmpty(userAcademicMap['attachSubjectList'])}" th:each="subject : ${userAcademicMap['attachSubjectList']}">
                        <li class="item-content">
                            <div class="item-inner">
                                <div class="item-title fs7" th:text="${subject['subjectName']}"></div>
                            </div>
                        </li>
                        <li th:if="!${#lists.isEmpty(subject['childSubjectList'])}" class="item-content">
                            <div class="item-inner">
                                <div class="academicCon">
                                    <ul style="padding-left: 0;">
                                        <li th:each="child : ${subject['childSubjectList']}">
                                            <span class="vam fs6" th:text="${child['subjectName']}"></span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </section>
        </div>
    </div>
    <div data-th-replace="layout/footer"></div>
    <script type="text/javascript" th:src="@{{path}/front/mobile/business/user/center/academic/u-academic.js?v={v}(path=${staticPath},v=${v})}"></script>
</body>
</html>